<template>
    <div style="display: flex">
        <el-input v-model="search" placeholder="请输入消息标题"
                  style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
        </el-button>
    </div>
    <el-table :data="tableData" :row-style="{ height: '77px' }" border
              style="width: calc(100vw - 240px);height: 75vh;margin-top: 20px;font-size: 15px;">
        <el-table-column align="center" prop="username" label="发布人" width="180"/>
        <el-table-column align="center" prop="title" label="消息标题" width='auto' show-overflow-tooltip/>
        <el-table-column align="center" prop="state" label="是否接收" width='150'>
            <template #default="scope">
                <el-tag type="warning" v-if="scope.row.state === '0'">未读</el-tag>
                <el-tag type="success" v-else-if="scope.row.state === '1'">已读</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="sendTime" label="发送时间" width="250"/>
        <el-table-column align="center" fixed="right" label="操作" width="200">
            <template v-slot="scope">
                <el-button type="primary" icon="Message" size="small" @click="receiveAnnounce(scope.row.id)">接收</el-button>
                <el-button type="success" icon="View" size="small" @click="open(scope.row)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--      分页-->
    <div style="margin-top: 10px">
        <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>

    <el-dialog :close-on-click-modal="false" title="消息查看" v-model="dialogVisible" width="700">
        <div style="font-weight: bold;font-size: 20px">通知标题</div>
        <div style="margin-top: 10px">
            {{ this.form.title }}
        </div>
        <div style="margin-top: 20px;font-weight: bold;font-size: 20px">通知内容</div>
        <div style="margin-top: 10px">
            {{ this.form.content }}
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="reset('form')">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import {ref} from 'vue'
    import request from "~/utils/request.js";

    export default {
        data() {
            return {
                dialogVisible: false,
                tableData: [],
                form: {},
                search: "",
                currentPage: 1,
                pageSize: 10,
                total: 0,
            }
        },
        created() {
            this.load()
        },
        methods: {
            load() {
                request.get("/receive-announce/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&title=" + this.search +"&userId="+this.$store.state.user.id ).then(res => {
                    if (res.code === '200') {
                      console.log(this.$store.state.user.id)
                        for (let key in res.data) {
                            if (key === "records") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        ElMessage.error("错误" + res.msg)
                    }
                })
            },
            receiveAnnounce(scope) {
                this.$confirm('是否确定已读?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get("/receive-announce/updateState/" + scope).then(res => {
                        if (res.code === '200') {
                            this.$message.success("成功")
                            this.load()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                });
            },
            // 提交
            open(val) {
                Object.assign(this.form, val)
                this.dialogVisible = true
            },
            // 取消
            reset(val) {
                this.form = {}
                this.dialogVisible = false;
            },
            handleCurrentChange(item) {
                // 改变当前页码触发
                this.currentPage = item
                this.load()
            },
            handleSizeChange(item) {   // 改变当前每页的个数触发
                this.pageSize = item
                this.load()
            },
        }
    }

</script>

<style>

</style>
